<template>
	<view class="address">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">我的收货地址</block>
		</cu-custom>
		<view class="address-list" v-if="type">
			<view class="list-item" :record="item" v-for="(item,i) in record" :key="item.id">
				<view class="address-info" v-on:click="chooseAdd(i)">
					<view class="address-base">
						<text class="name">{{item.name}}</text>
						<text class="tel">{{item.tel}}</text>
						<text class="default-icon" v-if="item.is_default == 1">默认地址</text>
						<!-- <text class="default-icon take-default" v-if="item.is_default == 0"  @click="takeDefaults(item.id)">设为默认</text> -->
					</view>
					<view class="address-map">
						{{nameText(item)}}
					</view>
				</view>
				<view class="address-action" @tap="addressEdit(item.id)">
					编辑
				</view>
			</view>
			<uni-load-more :status="more" v-if="record"></uni-load-more>
		</view>
		<view class="address-list" v-if="type==false">
			<view class="list-item" :record="item" v-for="item in record" :key="item.id">
				<view class="address-info">
					<view class="address-base">
						<text class="name">{{item.name}}</text>
						<text class="tel">{{item.tel}}</text>
						<text class="default-icon" v-if="item.is_default == 1">默认地址</text>
						<text class="default-icon take-default" v-if="item.is_default == 0"  @click="takeDefaults(item.id)">设为默认</text>
					</view>
					<view class="address-map">
						{{nameText(item)}}
						
					</view>
				</view>
				<view class="address-action">
					<view class="edit-btn" @tap="addressEdit(item.id)">编辑</view>
					<view class="del-btn" @tap="addressDel(item.id)">删除</view>
				</view>
			</view>
		</view>
		<view class="address-add">
			<button type="default" class="add-btn" @tap="addressEdit()">添加新地址</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import shops from '@/api/shop';
	export default {
		data() {
			return {
				page: 1,
				type:'',
				more: 'more',
				limit: 10,
				record: [],
				disabel: true,
				choose: true,
				flag: false,
				aid: 0,
			}
		},
		components: {},
		onLoad: function(option) {
			if(option.type!=undefined){
				this.type = option.type;
			}
			console.log(this.type);
			this.getAddress();
		},
		onShow(){
			this.getAddress();
		},
		methods: {
			nameText(item) {
				if (!item) return '未知地址';
				let address = item.province + ' ' +item.city + ' ' +item.district + ' ' +item.detail;
				if (address.length > 20) {
				    return address.slice(0,20) + '...'
				}
				return address;
			},
			addressEdit(aid) {
				let url = 'add'
				if(aid){
					url = 'add?aid=' + aid
				}
				uni.navigateTo({
					url: url
				});
			},
			chooseAdd(i){
				// console.log(i);
				let pages = getCurrentPages();
				let prepages = pages[pages.length-2];
				prepages.$vm.address = this.record[i];
				prepages.$vm.a_id = this.record[i].id;
				prepages.$vm.addressHas = true;
				uni.navigateBack({ 
					delta: 1
				});
			},
			async addressDel(del_id){
				let res = await shops.delOnce({
					address_id:del_id
				})
				if(res.code == 1){
					this.toast('已删除!');
					this.getAddress();
				}else{
					uni.showModal({
					    title: '提示',
					    content: '操作错误!',
						showCancel:false,
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
			},
			async getAddress() {
				let res = await shops.addressList({
					limit: this.limit,
					page: this.page,
				});
				if (res.data.length <= 0) {
					this.more = 'noMore';
				} else {
					this.more = 'more';
				}
				if (res.code == 1) {
					this.record = res.data;
					// console.log(res.data);
				} else {
					console.log(res.msg);
				}
			},
			async takeDefaults(aid){
				uni.showLoading({
				    title: ''
				});
				let res = await shops.takeDefaults({
					address_id: aid
				});
				if(res.code == 1){
					uni.showLoading({
					    title: '默认地址已更改！',
						duration: 2000
					});
					this.getAddress();
					return false;
				}else{
					uni.showModal({
					    title: '提示',
					    content: '设置失败!',
						showCancel:false,
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					return false;
				}
			}
		}
	}
</script>

<style lang="less">
	.address {
		background-color: rgb(239, 239, 239);

		.address-list {
			background-color: #ffffff;
			font-family: "SimHei";
			font-size: 28rpx;
			color: #3e3a3a;
			padding: 0 30rpx;

			.list-item {
				border-bottom: 1rpx solid #dcdcdc;
				padding: 15rpx 0;

				.address-info {
					display: inline-block;
					line-height: none;
					width: 600rpx;
					padding-right: 15rpx;
					border-right: 1rpx solid #dcdcdc;
				}

				.address-action {
					height: 80rpx;
					float: right;
					view{
						height: 35rpx;
						width: 70rpx;
						text-align: center;
						line-height: 35rpx;
						border-radius: 5rpx;
						color: #ffffff;
					}
					.edit-btn{
						margin-bottom: 10rpx;
						background-color: #4CD964;
						border:1rpx solid #4CD964;
					}
					.del-btn{
						background-color: #F43F3B;
						border:1rpx solid #F43F3B;
						color: #ffffff;
					}
				}
				.address-base {
					height: 50rpx;
					line-height: 50rpx;

					text {
						height: 50rpx;
						line-height: 50rpx;
					}
					.default-icon{
						width: 100rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 20rpx;
						text-align: center;
						float: right;
						border-radius: 15rpx;
						background-color: #faebd6;
						color: #ff7302;
					}
					.take-default{
						background-color: #94908f;
						color: #ffffff;
					}
				}
				.name {
					font-size: 35rpx;
					margin-right: 15rpx;
				}

				.tel {
					color: #928d8d;
				}
			}

		}

		.address-add {
			position: fixed;
			z-index: 1;
			width: 100vw;
			bottom: 0;

			button {
				background-color: rgb(252, 7, 4);
				color: #ffffff;
				border-radius: 0;
			}
		}
	}
</style>
